/* This file will hold styles for the mobile version of your website (mobile first). */
/* This also can include ANY global CSS that applies site-wide. Unless overwritten by a more specific style rule, CSS declarations in global.css will apply site-wide. */
/* Override Omega */

/* Include Default Variables & Mixins */
@import "variables.scss";
@import "mixins.scss";
/* End Variables & Mixins */
/*------------------------------------------------
[Table of contents]
0. Reset
1. Global
  1.1. Zones
  1.2. Regions
2. Section header
  2.1. Zone user
    2.1.1. Region user first
    2.1.2. Region user second
  2.2. Zone branding
  2.3. Zone menu
  2.4. Zone header
3. Section content
  3.1. Zone preface
  3.2. Zone content
    3.2.1. Sidebar first
    3.2.2. Content
    3.2.3. Sidebar second
  3.3. Zone postscript
4. Section footer
  4.1. Zone footer
  4.2. Zone footer2
5. Commerce specific
  5.1. Search & Collection page
  5.2. All products page
  5.3. Product page
  5.4. Checkout process
6. Kickstart specific
  6.1. Homepage elements
7. Blog
8. Comments
9. User account
------------------------------------------------*/

/**************************************************
* --
* - 0. Reset
* --
**************************************************/
/**
 * Flexible Media and Cross browser improvements
 * - This can cause issues in table cells where no width is set on the column,
 *   only in some versions of webkit and IE 7/8.
 * - Google maps break also, see below for fixes.
 */
img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
figure {
  margin: 0;
  padding: 0;
}
object,
embed,
video {
  max-width: 100%;
}
/* Kill flexible images in IE6-8 */
.ie6-8 img {
  max-width: none;
}
/* Override max-width 100% for map displays */
.gmap img,
.view-gmap img,
.openlayers-map img,
#getlocations_map_canvas img,
#locationmap_map img {
  max-width: none !important;
}
/* Improve IE's resizing of images */
svg:not(:root) {
  overflow: hidden;
}

table {
  thead {
    th {
      font-weight: bold;
    }
  }
  th,
  td {
    padding: 5px 10px;
  }
}
ul {
  margin-left: 10px;
  li {
   margin-left: 10px;
  }
}
/**
 * Reset Omega text shadow
 */
button, input[type="reset"], input[type="submit"], input[type="button"] {
  text-shadow: 0 0 0 transparent;
}
/**
 * Remove Cloud-zoom lens default border/margin.
 */
.cloud-zoom-lens {
  border: 0;
  margin: 0;
}
.cloud-zoom-container #wrap {
  z-index: 12 !important;
}
/**************************************************
* --
* 1. Global
* --
**************************************************/
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body {
  //background: $bodybg;
  font-family: $headerfont;
  font-weight: 400;
  font-size: 14px;
  margin: 0;
  width: 100%;
  overflow-x: hidden;
}
// default region positioning on mobile
.region {
  margin: 0 10px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: $headerfont;
  font-weight: 700;
  letter-spacing: 0;
}
a:link, a:visited {
  color: $color1;
  text-decoration: none;
}
a:hover {
  color: #000000;
}
h1#page-title {
  font-size: 28px;
  font-weight: 600;
  margin-left: 10px; /* LTR */
  text-transform: uppercase;
}
.node-page {
  margin: 0 10px;
}
textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  background: #fbfafa;
  border: 1px solid #e0e0e0;
  color: #4c4c4c;
  //height: 25px;
  margin: 1px;
  max-width: 100%;
  padding: 0px 5px;
}

select {
  height: inherit;
  padding: 0;
}
/* Tweaks for Safari + Chrome. */
@media (-webkit-min-device-pixel-ratio: 0) {
  select,
  select[size] {
    background-image: url('../images/select-arrow.gif');
    background-repeat: no-repeat;
    background-position: right center;
    padding: 3px;
    padding-right: 20px;
  }
}

/* Pager */
.item-list {
  ul.pager {
    li {
      margin: 0;
      padding: 0 5px;
      &.pager-item,
      &.pager-ellipsis {
        &:nth-child(3n) {
          padding: 0 5px;
        }
        &:nth-child(3n+4) {
          clear: none;
          float: none;
        }
      }
    }
  }
}
/**************************************************
* --
* 2. Section header
* --
**************************************************/
/**********************************************
* 2.1. Zone user
**********************************************/
.zone-user-wrapper {
  background-color: $topbarbackground;
  height: 34px;
  width: 100%;
}
.zone-user {
  height: 100%;
}
/*******************************************
* 2.1.1. Region user first
*******************************************/
#region-user-first {
  float: left; /* LTR */
}
/* User menu */
.block-menu-user-menu .content {
  float: left;
  position: relative;
  overflow: hidden;
  width: 100%;
  ul.menu {
    list-style: none;
    margin-top: 2px;
    position: relative;
    left: 50%;
    text-align: center;

    li {
      display: block;
      float: left; /* LTR */
      font-size: 0.9em;
      list-style: none;
      margin: 0;
      padding: 0;
      padding-bottom: 3px;
      position: relative;
      right: 50%;

      a {
        display: block;
        color: $color2;
        font-family: $headerfont;
        font-weight: 400;
        @include rounded-corners(4px);
        padding: 5px 6px;
        text-decoration: none;
        &.active {
          //color: #717171;
          text-decoration: underline;
        }
        &.active:hover,
        &:hover {
          color: $color2;
          text-decoration: underline;
        }
      }
    }
  }
}
/*******************************************
* 2.1.2. Region user second
*******************************************/
#region-user-second {
  background-color: #FFFFFF;
  float: right; /* LTR */
  height: 100%;
  margin: 0;
 .region-user-second-inner {
    height: 100%;
 }
}
/**
* Cart block
*/
.block-shopping-cart-block,
.block-shopping-cart-block .block-inner,
.block-shopping-cart-block .content {
  height: 100%;
  white-space: nowrap;
}
.block-shopping-cart-block {
  margin: 0 auto;
  margin-left: 50px; /* LTR */

  .content {
    background-color: #ffffff;
    background-image: url('../images/picto_cart.png');
    background-position: 1% 48%; /* LTR */
    background-repeat: no-repeat;
    float: right; /* LTR */
    margin-left: -60px; /* LTR */
    padding-left: 50px; /* LTR */

    .view-shopping-cart {
      .view-content,
      .view-footer,
      .view-empty {
        display: inline;
        float: left; /* LTR */
        font-family: $headerfont;
        font-weight: 400;
      }
      .view-content {
        ul,
        li {
          margin: 0;
          padding: 0;
        }
      }
      .view-footer {
        display: block;
        float: none;
      }
      .view-empty,
      .line-item-quantity {
        margin: 0;
        vertical-align: middle;
      }
      .view-empty p {
        float: left; /* LTR */
        line-height: 30px;
      }
      .line-item-summary {
        display: inline;
        float: left; /* LTR */
        height: 34px;
        line-height: 30px;
        margin: 0;

        .line-item-quantity {
          color: $color1;
          text-decoration: none;
        }
        .line-item-total {
          color: #888888;
          float: left; /* LTR */
          font-family: $headerfont;
          font-weight: 300;
          height: 100%;
          line-height: 30px;
          padding: 0 12px 0 6px;
        }
        .line-item-total-label {
          display: none;
        }
        ul.links {
          background-color: $cartceckoutbg;
          clear: none;
          color: $cartceckoutcolor;
          display: block;
          float: left; /* LTR */
          font-family: $headerfont;
          font-weight: 300;
          height: 100%;
          line-height: 30px;
          margin: 0 0 0 5px; /* LTR */
          padding: 0 10px;
          li {
            margin: 0;
            padding: 0;

            a {
              color: $color2;
              font-weight: 700;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
}
/**********************************************
* 2.2. Zone branding
**********************************************/
.zone-branding .region-branding {
  margin: 50px 0 15px 0;

  .logo-img {
    float: none;
    margin: 10px 0;
    text-align: center;
  }
}
/**
* Search block
*/
#block-views-exp-display-products-page {
  margin-bottom: 10px;
  padding-top: 28px;
}
#block-views-exp-display-products-page .views-exposed-widgets {
  float: right; /* LTR */
  margin-right: 10px; /* LTR */
  margin-bottom: 0;
  position: relative;
  width: 60%;
}
#block-views-exp-display-products-page .views-exposed-widget {
  padding: 0;
  position: relative;
}
#block-views-exp-display-products-page .form-text {
  border-color: #d7d7d7;
  @include rounded-corners(3px);
  font-family: $headerfont;
  font-weight: 400;
  height: 36px;
  position: relative;
  padding: 5px 28px 5px 5px; /* LTR */
  width: 100%;
}
#block-views-exp-display-products-page .views-widget-filter-search_api_views_fulltext {
  float: none;
}
#block-views-exp-display-products-page .views-submit-button {
  position: absolute;
  right: 5px; /* LTR */
  top: 6px;
  z-index: 100;

  .form-submit {
    background-color: transparent;
    background-image: url('../images/picto_magnifying_glass.png');
    background-position: 98% 50%; /* LTR */
    background-repeat: no-repeat;
    border: 0;
    @include rounded-corners(0px);
    margin: 0;
    position: relative;
    text-indent: -9999px;
  }
}
/**********************************************
* 2.3. Zone menu
**********************************************/
/**
* Navigation
*/
.menu-toggle {
  background: #666;
  @include rounded-corners(3px);
  clip: inherit;
  display: block;
  height: 36px;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 10px; /* LTR */
  top: -46px;
  width: 36px;

  &:hover {
    background: #777;
  }

  .toggle-help {
    color: #999;
    font-family: $headerfont;
    font-size: 1.2em;
    font-variant: small-caps;
    font-weight: 600;
    margin: 0;
    padding: 0 0 10px 0;
    position: absolute;
    left: 45px; /* LTR */
    top: 6px;
  }
  .line {
    border-bottom: 2px solid #CCC;
    display: block;
    margin: 4px auto 4px auto;
    width: 26px;
  }
  .first-line {
    padding-top: 4px;
  }
  .last-line {
    padding-bottom: 0;
  }
}
.navigation, {
  background: $mobilemenubg;
  display: none;
  padding-bottom: 10px;

  h2 {
    color: #999;
    font-family: $headerfont;
    font-size: 1.2em;
    font-variant: small-caps;
    font-weight: 600;
    margin: 0;
    padding: 0 0 10px 0;
  }
  .primary-menu,
  .second-menu {
    display: block;
    font-size: 1em;
    margin: 0 10px;
    padding: 10px 0 0 0;

    ul {
      margin: 0;
      li {
        display: inline-block;
        margin: 0 0 7px 0;
        padding: 0;
        width: 100%;
        a {
          display: block;
          font-family: $headerfont;
          font-weight: 600;
          padding: 12px 16px;
          text-decoration: none;
          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }
  /* Main menu */
  .primary-menu ul li {
    a {
      background-color: $mainmenuitembg;
      border: $mainmenuitemborder;
      color: $mainmenulinkcolor;
      text-transform: capitalize;

      &.active,
      &:hover {
        background-color: $mainmenuitembghover;
        border: $mainmenuitemborderhover;
      }
      &.active {
        color: $mainmenuitemfontactive;
      }
      &:hover {
        color: $mainmenuitemfonthover;
      }
    }
  }
  /* Secondary menu */
  .second-menu {
    clear: left;

    ul li a {
      background-color: $secondarymenuitembg;
      border: $secondarymenuitemborder;
      color: $secondarymenulinkcolor;
      padding: 12px 18px;
      text-transform: capitalize;

      &.active,
      &:hover {
        background-color: $secondarymenuitembghover;
        border: $secondarymenuitemborderhover;
      }
      &.active {
        color: $secondarymenuitemfontactive;
      }
      &:hover {
        color: $secondarymenuitemfonthover;
      }
    }
  }
}

.zone-menu {
  .block-menu {
    display: block;
    font-size: 1em;
    margin: 0;
    padding: 10px 0 0 0;

    ul.menu {
      li {
        display: inline-block;
        float: left;
        list-style: none;
        margin: 0 0 7px 0;
        padding: 0;
        width: 100%;

        a {
          background-color: $mainmenuitembg;
          border: $mainmenuitemborder;
          color: $mainmenulinkcolor;
          display: block;
          font-family: $headerfont;
          font-weight: 600;
          padding: 12px 16px;
          text-decoration: none;
          text-transform: capitalize;

          &.active,
          &:hover {
            background-color: $mainmenuitembghover;
            border: $mainmenuitemborderhover;
          }
          &.active {
            color: $mainmenuitemfontactive;
          }
          &:hover {
            color: $mainmenuitemfonthover;
            text-decoration: none;
          }
        }
      }
    }
  }
}

/**************************************************
* --
* 3. Section content
* --
**************************************************/
.section-content {
  min-height: 500px;
  height: 100%;
}
.front .section-content {
  min-height: 100%;
}
/**********************************************
* 3.1. Zone preface
**********************************************/
.zone-preface {
  background-color: #ffffff;
  margin-bottom: 0;
  padding-top: 20px;
  position: relative;
}
.breadcrumb,
#region-breadcrumb .pseudo-breadcrumb {
  @include rounded-corners(8px);
}
/**
* Pseudo Breadcrumb
*/
#region-breadcrumb {
  margin: 0px 10px;
  padding-bottom: 0;
  position: relative;

  .pseudo-breadcrumb-total-results {
    font-family: $headerfont;
    font-weight: 400;
    margin: 0 0 0 10px; /* LTR */

    em {
      color: $color1;
      font-style: normal;
    }
  }

  .pseudo-breadcrumb {
    background-color: #eeeeee;
    border: 1px solid #d7d7d7;
    margin: 20px 0;
    padding: 10px 21px 35px 5px; /* LTR */

    li {
      color: #898a8c;
      float: left; /* LTR */
      font-weight: bold;
      line-height: 23px;
      text-decoration: none;

      a {
        background: url('../images/btn_close.png') 0px 4px no-repeat;
        color: #898a8c;
        display: block;
        float: left;
        font: 0/0 none;
        height: 20px;
        padding: 0 5px 0 0; /* LTR */
        text-decoration: none;
        width: 20px;
      }
    }
  }
}

/**
* Breadcrumb
*/
.breadcrumb {
  background-color: #eeeeee;
  border: 1px solid #d7d7d7;
  color: #898a8c;
  margin: 20px 0;
  padding: 13px 27px;
  a {
    color: #898a8c;
    font-weight: bold;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}
/**********************************************
* 3.2. Zone content
**********************************************/
.zone-content-wrapper {
  height: 100%;

  .zone-content {
    margin-bottom: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
  }
}
/*******************************************
* 3.2.1. Sidebar first
*******************************************/
/* Search api facet blocks */
.region-sidebar-first .block-facetapi {
  border-top: 1px solid #000000;
  margin-top: 15px;
  margin-bottom: 30px;
  margin-left: 15px; /* LTR */
  padding-top: 15px;
  padding-left: 15px; /* LTR */

  h2 {
    font-family: $headerfont;
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
    padding-bottom: 8%;
  }

  ul {
    list-style: none;
    list-style-image: none;

    li  {
      background: none;
      line-height: 22px;
      list-style: none;
      list-style-image: none;
      margin: 0;

      a {
        color: #8e8e8e;
        font-family: $headerfont;
        font-weight: 700;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
        &.facetapi-active {
          background-image: url("../images/btn_close.png");
          background-position: left top; /* LTR */
          background-repeat: no-repeat;
          display: block;
          float: left; /* LTR */
          padding: 0 1px 0 0; /* LTR */
          text-decoration: none;
          text-indent: -9999px;
          width: 20px;
        }
        &.facetapi-inactive {
          padding-left: 21px; /* LTR */
        }
      }
    }
  }
}
/* Price range */
#search-api-ranges-block-slider-view-form,
#search-api-ranges-block-slider-view-form .range-box-left,
#search-api-ranges-block-slider-view-form .range-box-right {
  position: relative;
}
#search-api-ranges-block-slider-view-form {
  .text-range {
    display: none;
    font-size: 12px;
    margin: 5px 0;
    text-align: center;
    text-transform: uppercase;
  }
  .range-slider-box {
    display: none;
  }
  .range-box {
    float: left; /* LTR */
  }
  label {
    float: left; /* LTR */
    line-height: 24px;
    margin-right: 5px;
    text-align: left;
    white-space: nowrap;
    width: 40%;
    &:after {
      content: ":";
    }
  }

  #edit-range-from,
  #edit-range-to {
    float: left; /* LTR */
    width: 80px;
  }
  #edit-submit {
    background: #cecece;
    border: 0;
    @include rounded-corners(8px);
    color: $color2;
    font-size: 14px;
    font-weight: normal;
    margin-top: 2em;
    padding: 5px 12px;
  }
}
/*******************************************
* 3.2.2. Content
*******************************************/
/**
* Blocks
*/
#block-views-demo-content-slideshow-block-1 {
  /* HP blocks: Slideshow */
  position: relative;
  .bx-wrapper {
    position: relative;
  }
  .bx-wrapper .bx-window,
  .bx-wrapper .bx-viewport {
    overflow: visible !important;
  }
  .bx-wrapper ul.event-slider {
    li {
      margin: 0;
      overflow: hidden;

      a {
        display: block;
      }

    }
  }
  .views-field-nothing,
  .bx-prev,
  .bx-next {
    display: none;
    text-indent: -9999px;
  }
}
/*******************************************
* 3.2.3. Sidebar second
*******************************************/
#block-views-blog-category-list-block,
#block-views-blog-block-1 {
  .block-title {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
  }
}
#block-views-blog-category-list-block table {
  width: 100%;
  td {
    width: 50%;
  }
}
#block-views-blog-block-1 .views-row {
  border-bottom: 1px solid #E0E3E6;
  padding: 4px 4px 10px 4px;
  .views-field-title {
    line-height: 13px;
    padding-bottom: 4px;
    text-transform: uppercase;
  }
  .views-row-last {
    border-bottom: 0;
  }
}
/**********************************************
* 3.3. Zone postscript
**********************************************/
.region-postscript-first,
.region-postscript-second {
  margin-bottom: 5px;
}
.region-postscript-third {
  margin-right: 0;
}
.zone-postscript .grid-8 {
  float: left; /* LTR */
  margin: 0 1.5%;
  padding: 0;
  width: 30%;
}

#zone-postscript {
  margin-top: 20px;
  margin-bottom: 24px;

  /* HP blocks */
  .view-ad-push .views-row,
  .block-blog-block .block-inner {
    background-color: #cccccc;
    border: 1px solid #b1b1b1;
    padding: 10px;

    .field-content,
    .content {
      a {
        border: 4px solid #ffffff;
        display: block;
      }
      img {
        display: block;
        margin: auto;
      }
    }
    .views-field-field-tagline,
    .views-field-title {
      margin: 10px auto 0 auto;
    }
  }

  .view-ad-push .views-row {
    .views-field-field-image {
      display: block;
    }
    .views-field-field-headline {
      font-family: Georgia, 'Times New Roman', serif;
    }
  }

  .block-blog-block .block-inner {
    .block-title {
      background: transparent url('../images/bg_block_homepage_title.png') -18% 100% no-repeat; /* LTR */
      color: $color2;
      display: none;
      font-family: $headerfont;
      font-weight: 700;
      height: 50px;
      line-height: 44px;
      margin: 0 auto;
      margin-top: 25px;
      padding-left: 25px; /* LTR */
      position: absolute;
      top: 0;
      left: -1px; /* LTR */
      text-align: left; /* LTR */
      width: 112px;
      z-index: 1;
    }
    .views-field-title .field-content {
      display: block;
      width: 100%;
      p {
        margin-bottom: 0;
      }
    }
  }

  .view-ad-push .views-row .views-field-field-tagline,
  .block-blog-block .views-field-title {
    display: block;

    .field-content {
      color: $color2;
      line-height: 18px;
      padding: 0px;

      a {
        background: #666;
        color: $color2;
        display: block;
        font-family: $headerfont;
        font-weight: 700;
        min-height: 45px;
        padding: 5px;
        text-align: center;
        text-decoration: none;
        text-transform: capitalize;
      }
    }
  }
}
/**************************************************
* --
* 4. Section footer
* --
**************************************************/
.section-footer {
  background-color: $footerbg;
}
/**********************************************
* 4.1. Zone footer
**********************************************/
.zone-footer-wrapper {
  padding-top: 32px;
  padding-bottom: 36px;
}
/**
* Menu footer navigation
*/
.block-menu-menu-footer-navigation {
  width: auto;
}
.section-footer ul.menu,
.section-footer ul.menu li {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0 25px 0 0;
}

.section-footer ul.menu {
  width: 100%;
  li.expanded {
    list-style: none;
    list-style-image: none;
    padding-bottom: 10px;

    span,
    a {
      font-family: $headerfont;
      font-weight: 600;
      text-decoration: none;
    }
    span {
      color: $footermenuheadercolor;
    }
    ul.menu {
      margin: 10px 0 0 0;

      li {
        display: block;
        float: none;
        padding: 0;

        a {
          color: $footermenulinkcolor;
          font-family: $headerfont;
          font-weight: normal;

          &.active {
            color: #000;
            &:hover {
              text-decoration: underline;
            }
          }
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}

/**
* Connect with us
*/
#block-menu-menu-social-connection {
  h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    line-height: 16px;
    padding: 8px 15px;
    text-align: left; /* LTR */
  }

  .content ul.menu {
    list-style: none;
    li {
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
      line-height: 15px;
      margin-top: 2px;
      margin-bottom: 15px;
      margin-left: 0;
      &:hover {
        background-color: #cecece;
        @include rounded-corners(4px);
        cursor: pointer;
      }
      span,
      a {
        background-position: 2% 50%; /* LTR */
        background-repeat: no-repeat;
        color: $footermenulinkcolor;
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        display: block;
        height: 35px;
        line-height: 16px;
        padding-top: 5px;
        padding-left: 50px; /* LTR */
        text-decoration: none;
      }

      a.facebook {
        background-image: url('../images/icon_facebook.png');
      }
      a.twitter {
        background-image: url('../images/icon_twitter.png');
      }
      a.pinterest {
        background-image: url('../images/icon_pinterest.png');
      }
    }
  }
}
/**********************************************
* 4.2. Zone footer2
**********************************************/
.zone-footer2-wrapper {
  background-color: $footer2bg;
  min-height: 60px;
  padding: 20px 0;
}
body.activebar-container .zone-footer2-wrapper {
  min-height: 100px;
}
/**
* Powered by Drupal Commerce
*/
.block-powered-drupal-commerce a {
  color: #1d76bc;
  font-weight: 600;
  text-decoration: none;
}
/**
* Payment blocks
*/
#block-menu-menu-payment-methods {
  background-color: #ffffff;
  color: #3f3f3f;
  padding: 10px;

  h2 {
    display: none;
  }
  ul.menu {
    height: 40px;
    margin-bottom: 0;

    li {
      display: inline;
      float: left; /* LTR */
      margin: 0;
      text-align: center;
      width: 24%;
      padding: 0;
      &:first-child {
        padding-left: 10px; /* LTR */
      }

      a {
        background-position: 0 100%;
        background-repeat: no-repeat;
        display: block;
        height: 30px;
        margin: 5px 0px;
        text-indent: -9999px;
        width: 50px;
      }
      .visa {
        background-image: url('../images/picto_visa_premier.png');
      }
      .paypal {
        background-image: url('../images/picto_paypal.png');
      }
      .mastercard {
        background-image: url('../images/picto_mastercard.png');
      }
      .american-express {
        background-image: url('../images/picto_american_express.png');
      }
    }
  }
}
/**************************************************
* --
* 5. Commerce specific
* --
**************************************************/
/**********************************************
* 5.1. Search & Collection page
**********************************************/
/**
* Collection page
*/

.page-product-category,
.page-collection {
  h1#page-title {
    display: none;
  }
  .block-search-api-sorts {
    margin-bottom: 10px;
  }
 .block-main {
   clear: both;
  }
}


.view-collection-products .view-header,
.view-collection-taxonomy-term .view-header {
  background-color: #888;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-bottom: 35px;
  position: relative;

  .taxonomy-title {
    clear: both;
    color: $color2;
    font-family: $headerfont;
    font-size: 2em;
    font-weight: 700;
    line-height: 3em;
    margin: 0;
    position: absolute;
    top: 0;
    left: 10px; /* LTR */
    text-decoration: none;
    text-shadow: 0 1px 1px #C3C3C3;
    text-transform: capitalize;
  }
  .views-row {
    border: 1px solid #d7d7d7;
    margin: 0;
    margin-bottom: 20px;
  }
  .view-collection-products,
  .collection-terms {
    padding-top: 6em;

    .view-content {
      .item-list {
        /* List of categories related to a collection */
        clear: none;
        display: inline;
        float: left; /* LTR */
        margin-right: 6px; /* LTR */
        margin-bottom:7px;

        h3 {
          margin-bottom: 0;

          a {
            background-color: #cecece;
            border: 1px solid #cecece;
            @include rounded-corners(8px);
            color: #000000;
            font-family: $headerfont;
            font-weight: 400;
            font-size: 16px;
            padding: 5px 15px;
            text-decoration: none;
            &:hover {
              background-color: #FFFFFF;
              border: 1px solid #cecece;
              color: #000000;
            }
          }
        }
        ul {
          display: none;
        }
      }
    }
  }
}
.view-collection-products .view-content .item-list .products-per-collection li,
.view-collection-taxonomy-term .view-content .item-list .products-per-collection li {
  &.views-row {
    float: left; /* LTR */
  }
  &.views-row.last {
    padding-right: 0; /* LTR */
  }

  .commerce-product-field {
    color: #000000;
    font-size: 14px;
    margin-bottom: 5px;
    text-decoration: none;
  }
  header {
    background: url('../images/bg_product_attributes_top.png') center top no-repeat;
    padding-top: 20px;
    h2 {
      clear: both;
      display: block;
      font-size: 14px;
      height: 35px;
      line-height: 16px;
      margin: 0 4px;
      a {
        color: #000000;
        font-size: 14px;
        text-decoration: none;
      }
    }
  }
  a header {
    //display: none;
  }
  .field-type-commerce-price {
    color: #858787;
    font-family: $headerfont;
    font-size: 14px;
    font-weight: 400;

    .price_prefix p {
      display: inline;
    }
  }

  .field-name-field-color .vocabulary-color,
  .views-field-field-extractor-field-product ul li {
    border: 1px solid #CBCDCC;
    float: left; /* LTR */
    margin: 0 0.5em 0.5em 0; /* LTR */
    padding: 2px;

    .commerce-fancy-attributes-color {
      border: none;
    }
  }
}
/**********************************************
* 5.2. All products page
**********************************************/
.page-products {
  .view-display-products {
    margin-top: 20px;
    li {
      &.views-row {
        display: inline;
        float: left; /* LTR */
        min-height: 380px;
        height: auto;
        margin: 0;
        padding-right: 5px; /* LTR */
        padding-bottom: 30px;
        width: 230px;
        &.last {
          padding-right: 0; /* LTR */
        }
      }
      &:nth-child(3n) {
        padding-right: 0; /* LTR */
      }
      &:nth-child(3n+4) {
        clear: left; /* LTR */
        float: left; /* LTR */
      }

      .commerce-product-field {
        margin-bottom: 5px;
      }
      header {
        background: transparent url('../images/bg_product_attributes_top.png') center top no-repeat;
        h2 {
          clear: both;
          font-size: 14px;
          height: 35px;
          line-height: 16px;
          margin: 0 4px;
          padding-top: 20px;
        }
        a {
          color: #000;
          font-size: 14px;
          text-decoration: none;
        }
      }
      a header {
        //display: none;
      }
      .content {
        .commerce-product-field {
          font-size: 14px;
          text-decoration: none;
        }

        .field-name-commerce-price {
          color: #858787;
          font-family: $headerfont;
          font-size: 14px;
          font-weight: 400;

          .price_prefix p {
            display: inline;
          }
        }
      }
      .field-name-field-color .vocabulary-color,
      .views-field-field-extractor-field-product ul li {
        border: 1px solid #CBCDCC;
        clear: none;
        float: left;
        margin: 0 0.5em 0.5em 0;
        padding: 2px;

        .commerce-fancy-attributes-color {
          border: none;
        }
      }
    }
  }
}
/** TODO: Check if used on commerce_kickstart
.page-products .commerce-product-extra-field-title {
  background: url('../images/bg_search_product_name.png') left top no-repeat;
  margin-top: 4px;
  padding-top: 17px;
  font-size: 14px;
  text-decoration: none;
}/*

/**
* Search sort block
*/
.block-search-api-sorts {
  &:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
  }
  .block-inner {
    float: right; /* LTR */
    clear: right; /* LTR */

    h2.block-title {
      display: inline;
      float: left; /* LTR */
      font-size: 13px;
      line-height: 32px;
      margin-right: 5px; /* LTR */
      text-transform: uppercase;
    }
  }
  .content {
    float: left; /* LTR */

    ul.search-api-sorts {
      margin: 0;
      li {
        color: $color2;
        display: inline;
        float: left; /* LTR */
        margin: 0;
        margin-left: 5px; /* LTR */
        text-align: center;
        text-decoration: none;

        span,
        a {
          background-color: #8e8e8e;
          @include rounded-corners(8px);
          display: block;
          padding: 5px 12px;
        }
        a {
          background-color: #cecece;
          color: $color2;
          text-decoration: none;
        }
        span a {
          background: none;
          display: block;
          position: absolute;
          top: 4px;
          right: 0;
          margin-right: 5px; /* LTR */
          padding: 0;
          height: 13px;
          width: 13px;
        }
        .search-api-sort-active {
          color: $color2;
          position: relative;
          padding-right: 25px; /* LTR */
          padding-left: 12px; /* LTR */
          text-decoration: none;

          .search-api-sort-remove {
            display: block;
            float: left;
            text-indent: -9999px;
            width: 0;
          }
          .sort-asc img,
          .sort-desc img {
            vertical-align: baseline;
          }
        }
      }
    }
  }
}
/**********************************************
* 5.3. Product page
**********************************************/
/**
* Add to cart popin.
*/
div.messages.commerce-add-to-cart-confirmation {
  background-color: #E4F5FE;
  border-color: #D7D7D7;
  margin-left: -30% !important; /* width/2 */
  top: 50px;
  text-align: center;
  width: 60%;

  .message-inner {
    .commerce-add-to-cart-confirmation-close {
      background: url('../images/btn_close.png') no-repeat 0 0;
    }

    .added-product-title {
      color: #696458;
      float: none;
      font-size: 14px;
      font-weight: 500;
      padding: 10px 30px 10px 10px; /* LTR */
      text-transform: uppercase;
      width: auto;
      //width: 180px;
    }
    .button-wrapper {
      height: auto;
      position: relative;
      right: none;
      width: auto;

      .button {
        &.checkout {
          background-color: $color1;
        }
        &.continue {
          background-color: #b3b3b3;
        }
      }
    }

    .view-confirm-message-product-display {
      clear: both;
      float: none;
      width: auto;

      .view-content {
        margin: 0;
        margin-bottom: 15px;
        text-align: left; /* LTR */
        width: 90%;

        &:after {
          clear: both;
          content: ".";
          display: block;
          height: 0;
          visibility: hidden;
        }
        .views-field-commerce-product {
          h2 {
            display: none;
          }
          .content {
            .field-name-field-images {
              position: relative;
              left: 0;
              img {
                border: #D7D7D7 solid 1px;
                text-align: left; /* LTR */
                width: auto;
              }
            }
            .commerce-product-sku .commerce-product-sku-label {
              color: #878380;
              display: inline;
              font-weight: bold;
              padding-right: 5px; /* LTR */
            }
            .commerce-product-sku,
            .field {
              clear: both;
              color: #878380;
              font-size: 12px;
              margin-right: 20px; /* LTR */
            }
            .commerce-product-title-label,
            .commerce-product-status-label {
              display: inline;
            }
          }
        }
        .views-field-quantity {
          font-size: 12px;

          .views-label-quantity {
            color: #878380;
            font-weight: bold;
            padding-right: 5px; /* LTR */
          }
        }
        .views-field-commerce-total {
          clear: both;
          display: inline;
          font-size: 20px;
          font-weight: 300;

          .views-label-commerce-total {
            color: #878380;
            float: left; /* LTR */
            padding-top: 25px;
            padding-right: 5px; /* LTR */
          }
          .field-content {
            color: $color1;
            display: inline;
            float: right; /* LTR */
            font-size: 20px;
            padding-top: 25px;
          }
        }
        .field-label {
          color: #878380;
          padding-right: 5px; /* LTR */
        }
      }
    }

  }
  .views-field-title {
    text-align: left; /* LTR */
  }
}

.node-product-type {
  .product-title {
    clear: both;
    font-family: $headerfont;
    font-size: 24px;
    font-weight: 700;
  }
  .commerce-product-sku {
    color: #b1b1b1;
    font-family: $headerfont;
    font-size: 13px;
    font-weight: 400;
    .commerce-product-sku-label {
      font-weight: normal;
    }
  }
  .field-name-commerce-price {
    font-family: $headerfont;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .cloud-zoom-container {
    margin-bottom: 20px;
    #wrap {
      float: inherit;
      z-index: 10 !important; /* Fix overlay */
    }
    .cloud-zoom-gallery-thumbs {
      clear: both;

      .cloud-zoom-gallery {
        border: 1px solid #5b5b5b;
        display: inline-block;
        float: none;
        margin: 5px 0;
      }
    }
  }
  .field-name-body {
    font-family: $headerfont;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px;

    .read-more,
    .read-less,
    .read-more a,
    .read-less a {
      font-family: $headerfont;
      font-size: 14px;
      font-weight: 400;
    }
    .read-more a,
    .read-less a {
      background-position: left top; /* LTR */
      background-repeat: no-repeat;
      color: #898a8c;
      display: block;
      height: 18px;
      margin-top: 10px;
      padding-right: 20px; /* LTR */
      text-decoration: none;
      text-indent: 25px;
      text-transform: capitalize;

      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }
    .read-more a {
      background-image: url('../images/btn_read_more.png');
    }
    .read-less a {
      background-image: url('../images/btn_read_less.png');
    }
  }
  .field-type-commerce-product-reference {
    background: url('../images/bg_product_attributes_bottom.png') center bottom no-repeat;
    margin-bottom: 15px;
    padding-bottom: 50px;

    form.commerce-add-to-cart {
      background: url('../images/bg_product_attributes_top.png') center top no-repeat;
      padding-top: 40px;

      .attribute-widgets {
        .form-item {
          position: relative; /* Positions the throbber */

          &:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
          }
          div#edit-attributes-field-color {
            float: left; /* LTR */
            width: 50%;
          }
          .ajax-progress-throbber { /* Positions the throbber */
            display: none;
            position: absolute;
          }
          .description {
            position: relative;
          }
        }
        .form-item-attributes-field-color {
          .form-item.form-item-attributes-field-color {
            float: left; /* LTR */
            margin-right: 5px; /* LTR */
            width: auto;
          }
          .commerce-fancy-attributes-color {
            height: 20px;
            width: 20px;
          }
          .description .field {
            border: 1px solid #CBCDCC;
            padding: 3px;
          }
          .description-selected .field {
            border-color: $color1;
          }
        }
      }
      label {
        float: left; /* LTR */
        font-family: $headerfont;
        font-weight: 600;
        margin-right: 5px; /* LTR */
        white-space: nowrap;
        width: 45%;

        &:after {
          content: " :";
        }
      }
      .form-item {
        margin: 0;
        padding-bottom: 1em;
      }
      .form-submit {
        background-color: #2698F2;
        background-image: url('../images/bg_add_to_cart.png');
        background-position: 90% 50%; /* LTR */
        background-repeat: no-repeat;
        border: 0;
        @include rounded-corners(8px);
        color: #ffffff;
        font-family: $headerfont;
        font-size: 17px;
        font-weight: 400;
        margin-top: 40px;
        margin-left: 5px; /* LTR */
        padding: 5px 50px 5px 10px; /* LTR */

        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}

.service-links {
  float: right; /* LTR */
  width: 315px;

  ul li {
    display: inline;
    float: left; /* LTR */
    margin: 0 5px;
    padding: 0;
    width: 90px;
    &:first {
      margin-left: 0;
    }
  }
}
/**********************************************
* 5.4. Checkout process
**********************************************/
/**
* Checkout progress
*/
ul.inline.commerce-checkout-progress {
  li {
    display: block;
    float: left;
  }
}
ul.inline.commerce-checkout-progress,
ol.inline.commerce-checkout-progress {
  margin-bottom: 0;
  margin-left: 10px;
  li {
    background-color: #efefef;
    color: #898A8C;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin: 0 0px 10px 0;
    padding: 15px 15px 15px 35px; /* LTR */
    position: relative;
    width: auto;
    &:after {
      background: transparent url('../images/bg_checkout_progress.png') right center no-repeat; /* LTR */
      content: " ";
      font-size: 0;
      display: block;
      float: right; /* LTR */
      position: absolute;
      top: 0;
      right: -25px; /* LTR */
      height: 50px;
      width: 25px;
      z-index: 2;
    }
    &.last:after {
      background: #efefef url('../images/bg_checkout_progress_last.png') right center no-repeat; /* LTR */
    }
    &.active,
    &.last.active {
      background-color: #3aa1f3;
      color: #ffffff;

      &:after {
        background: transparent url('../images/bg_checkout_progress_active.png') right center no-repeat; /* LTR */
      }
    }

    &.previous,
    &.visited {
      color: #3aae3f;
      a {
        color: #3aae3f;}
    }
    a {
      font-size: 16px;
      font-weight: 700;
    }
  }
}
/**
* Shopping cart page
*/
#views-form-commerce-cart-form-default,
#commerce-checkout-form-checkout .view-commerce-cart-summary,
#commerce-checkout-form-review .view-commerce-cart-summary,
.page-user-orders .view-commerce-line-item-table /* Review completed order */,
.view-commerce-backoffice-user-orders {

  table {
    border-collapse: collapse;
    width: 100%;

    th {
      color: #777777;
      font-size: 13px;
      padding: 0 10px 10px;
      text-align: left; /* LTR */
      text-transform: uppercase;
    }
    tr.even,
    tr.odd {
      background-color: transparent;
      border: 0;
    }
    td {
      background-color: transparent;
      border-bottom: 1px solid #CCC;
      margin: 0;
      padding: 25px 10px;
      //white-space: nowrap;

      &.views-field-nothing {
      }
    }
    .views-field-edit-delete,
    .views-field-commerce-total {
      text-align: right; /* LTR */
    }
  }

  .commerce-line-item-actions {
    clear: both;
  }

  table.commerce-price-formatted-components {
    td {
      white-space: normal;
    }
  }
}

.page-user-orders .view-commerce-line-item-table table td {
  white-space: normal;
}
/* Order total table */
.field-name-commerce-order-total {
  float: none;

  .field-items {
    background-color: #E5E5E5;
    float: right; /* LTR */
    margin-bottom: 20px;
    padding: 10px 15px;
    min-width: 280px;
    width: 280px;

    table.commerce-price-formatted-components {
      width: 100%;
      tr,even,
      tr,odd {
        background: none;
        border: 0;
        padding: 10px !important;

      }
      td {
        border-bottom: 1px solid #CCC;
        padding: 10px !important;
        width: auto !important;

        &.component-title {
          text-align: left; /* LTR */
        }
      }
    }
  }
}

/* Checkout button */
.page-checkout {
  .checkout-buttons {
    margin: 0 10px;

    input#edit-cancel,
    input#edit-back,
    input.checkout-back {
      background: none;
      border: none transparent;
      border-bottom: 1px solid #888;
      @include rounded-corners(0px);
      color: #666666;
      font-weight: normal;
      margin: 0 20px 0 5px; /* LTR */
      padding: 0 0 1px 0;
      overlay: 0;
    }
    input#edit-continue,
    input.checkout-continue {
      background: #2698F2 none 0 0 no-repeat;
      border: 0;
      @include rounded-corners(8px);
      color: #ffffff;
      font-family: $headerfont;
      font-weight: 600;
      font-size: 15px;
      font-weight: normal;
      margin: 0 10px 0 0; /* LTR */
      padding: 10px 15px;
    }
  }
}

.page-cart #views-form-commerce-cart-form-default {
  table {
    tbody {
      /*td {
          // used ?

        .entity-commerce-product {

          display: inline;
          &:after {
            clear: none;
          }

          h2 {
            display: none;
            font-size: 0;
            text-indent: -9999px;
          }
          .content {
            .field:after {
              clear: none;
              margin-bottom: 3px;
            }
            .field-name-field-images {
              display: inline;
              float: left;
              margin-right: 8px;

              img {
                border: 1px solid #9d9d9d;
              }
            }
            .commerce-product-sku-label,
            .field-label {
              font-size: 11px;
              font-weight: normal;
              line-height: 22px;
              text-transform: uppercase;
              vertical-align: bottom;
            }
            .field-label-inline .field-items {
              float: inherit;
            }
            .commerce-product-title {
              font-weight: bold;
            }
          }
        }
      }*/
      a.view_product_details {
        color: #7d7d7d;
        font-size: 11px;
        margin-top: 5px;
      }
    }
    /*.views-field-line-item-title {
      width: 400px; // used ??
    }*/
    /*.views-field-nothing {
      position: relative; >> commerce kickstart
    }*/
  }
  /* Button styling */
  .views-field-edit-delete input.delete-line-item {
    background: none;
    border: none transparent;
    border-bottom: 1px solid #888;
    @include rounded-corners(0px);
    color: #666666;
    font-weight: normal;
    padding: 0 0 1px 0;
  }
  .commerce-line-item-actions {
    input#edit-submit {
      background: none;
      border: none transparent;
      border-bottom: 1px solid #888;
      @include rounded-corners(0px);
      color: #666666;
      font-weight: normal;
      margin-right: 20px; /* LTR */
      padding: 0 0 1px 0;
    }
    input#edit-checkout {
      background: #2698F2 none 0 0 no-repeat;
      border: 0;
      @include rounded-corners(8px);
      color: #ffffff;
      font-family: $headerfont;
      font-weight: 600;
      font-size: 15px;
      font-weight: normal;
      padding: 6px 12px;
    }
  }

}
/**
* Checkout page
* Review order page
* Checkout complete page
*/
.page-checkout {
  .checkout-help {
    margin: 0 0 10px 10px; /* LTR */
  }

  #commerce-checkout-form-checkout,
  #commerce-checkout-form-review {
    fieldset {
      &.customer_profile_billing,
      &.customer_profile_shipping {
        .form-item {
          width: 100%;
        }
        .locality-block {
          .form-item {
            margin-bottom: 0;
            width: inherit;

            label {
              clear: both;
              float: none;
              width: inherit;
            }
          }
        }
      }
      legend {
        border-bottom: 1px solid #d7d7d7;
        margin: 0 10px 10px 0px;
        padding: 0px;
        width: 100%;
        span {
          font-weight: 600;
          padding-left: 10px; /* LTR */
          text-transform: uppercase;
        }
      }
      .fieldset-wrapper {
        margin: 0 10px;
      }
      label {
        float: none;
        width: inherit;
      }
    }
  }
  /* Checkout complete */
  #commerce-checkout-form-complete {
    margin: 0 10px;
    padding-top: 15px;
  }
}
/**
* Shipping page
*/
.page-checkout-shipping {
  .commerce_shipping {
    margin: 0 10px;
  }
  .form-item-commerce-shipping-shipping-service {
    clear: left; /* LTR */
    float: left; /* LTR */
    margin: 0;
    padding: 25px 8px;
    position: relative;
    width: 400px;

    label {
      float: none;
      font-weight: 400;
      padding: 0 0 0 10px; /* LTR */
      width: inherit;
    }
    .ajax-progress-throbber {
      position: absolute;
      top: 0;
      left: 0;
    }
    &:hover,
    &:hover .option {
      background-color: #ececec;
      cursor: pointer;
    }
  }
}

/**
* Review order page
*/
.page-checkout-review {
  #commerce-checkout-form-review {
    .checkout-help {
      margin: 0 0 10px 10px; /* LTR */
    }
    .checkout_review table {
      width: 100%;

      tbody {
        tr {
          background-color: transparent;
          border: 0;
        }
        tr.pane-title td {
          border-bottom: 1px solid #d7d7d7;
          font-weight: 600;
          padding: 5px 10px;
          text-transform: uppercase;

          .pane-data-full {
            padding: 20px;
          }
        }
        tr.pane-data {
          td.pane-data-full {
            border-bottom: 0;
            padding: 20px;
            padding-bottom: 10px;

            .view-commerce-cart-summary {
              margin-top: 5px;
            }
          }
        }
      }
    }
    table.commerce-price-formatted-components {
      margin: 0;
    }
    /* Payment information */
    fieldset.commerce_payment .fieldset-wrapper {
      padding: 0 10px;
      label {
        float: none;
      }
    }
  }
}

/* Page user review order */
.page-user-orders {
  .field-name-commerce-order-total {
    @include clearfix;

    &:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .commerce-price-formatted-components tr.component-type-commerce-price-formatted-amount {
      background-color: transparent;
      color: #000000;
    }
  }
  .field-name-commerce-customer-billing,
  .field-name-commerce-customer-shipping {
    float: left; /* LTR */
    margin: 5px 3% 0 0; /* LTR */
    width: 45%;
    .field-label {
      background-color: #E5E5E5;
      font-size: 14px;
      padding:7px 10px;
    }
    .field-items {
      padding: 5px;
    }
  }
  .commerce-backoffice-order-status-form {
    clear: both;
    padding: 20px 0;

    .form-type-select,
    .form-submit {
      display: inline;
    }
  }

}
.view-commerce-backoffice-user-orders th a {
  color: #777777;
  text-decoration: none;
  img {
    vertical-align: baseline;
  }
}
/*
.page-user-orders .view-commerce-user-orders table thead th a {
  color: #777777;
  text-decoration: none;
}*/

/* Order history */
.view-commerce-backoffice-order-messages {
  table {
    width: 100%;
  }
  th {
    color: #777777;
    font-size: 13px;
    padding: 0 10px 10px;
    text-align: left; /* LTR */
    text-transform: uppercase;
  }
  td {
    background-color: transparent;
    padding: 25px 10px;
  }
  tr.even,
  tr.odd {
    background-color: transparent;
  }

  .views-field-timestamp {
    color: #898A8C;
    font-size: 13px;
  }

  h2.title {
    background-color: #E5E5E5;
    font-size: 14px;
    padding:7px 10px;
  }

/* Order activity stream */
/* Order states */ /* Need generic markup */
  .commerce_order_state,
  .commerce_order_payment_entered {
    border: 1px solid #E5E5E5;
    @include rounded-corners(3px);
    padding: 4px 7px;
  }
}

/* Comment form */
#commerce-backoffice-order-message-form {
  fieldset {
    position: relative;
    margin: 0;
    margin-top: 40px;
    padding-top: 20px;

    legend {
      position: absolute;
      top: -10px;
    }

    .fieldset-wrapper {
      background-color: #ececec;
      padding: 15px;

      .form-item label {
        float: left; /* LTR */
        padding-right: 8px; /* LTR */
        text-align: right; /* LTR */
        width: 110px;
        &:after {
          clear: both;
          content: ":";
        }

      }
      .form-textarea-wrapper {
        float: left; /* LTR */
        width: 65%;
      }
      .filter-wrapper {
        clear: both;
        .fieldset-wrapper {
          font-size: 11px;
          margin: 0 auto;
          width: 80%;
        }
        .form-item {
          margin-top: 0;
          label {
            //float: inherit;
            text-align: inherit;
            width: inherit;
          }
        }
        .form-submit {
          font: normal 16px/21px "Open Sans", Arial, sans-serif;
          line-height: 30px;
          padding: 4px 15px;
        }
      }
    }
  }
}
/**************************************************
* --
* 6. Kickstart specific
* --
**************************************************/
/**********************************************
* 6.1. Homepage elements
**********************************************/
.front .zone-content {
  margin-bottom: 0;
}
.front .region-content-inner {
  min-height: 100%;
  padding: 0;
}
/**************************************************
* --
* 7. Blog
* --
**************************************************/
.page-blog .region-content .view-content {
  .views-row,
  .views-row-even {
    clear: none;
    float: none;
  }
  .views-row {
    border: 1px solid #E0E3E6;
    display: block;
    margin: 15px 0px;
    padding: 0px;
    width: auto;
    .node-blog-post {
      padding: 10px 15px;
      position: relative;
    }
    h2 {
      font-size: 18px;
      font-weight: 400;
      margin-bottom: 0;
      text-transform: uppercase;

      a {
        color: #656565;
        text-decoration: none;
      }
    }
    .submitted {
      color: #A0A0A0;
      font-size: 12px;
      margin: 5px 0;
      text-transform: uppercase;
      a {
        color: #A0A0A0;
      }
    }
    .content {
      .field-name-field-image {
        margin: 0 0 15px;
      }
      .field-type-taxonomy-term-reference .field-items .field-item {
        padding-right: 3px;
      }
      .field-name-field-tags {
        border-top: 1px dotted #777777;
        font-size: 11px;
        margin-bottom: 5px;
        padding: 3px;
      }
      .field-name-field-blog-category {
        font-size: 11px;
        padding: 3px;
      }
    }
    .node-links {
      font-size: 12px;
      a {
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
      }
      ul li {
        margin: 0;
      }
    }
  }
}

.node-type-blog-post {
  h1#page-title,
  .comment-wrapper .title {
    color: #656565;
    font-weight: 400;
    margin-bottom: 0;
    text-transform: uppercase;
  }

  .submitted {
    color: #A0A0A0;
    font-size: 12px;
    margin: 5px 0;
    text-transform: uppercase;
    a {
      color: #A0A0A0;
    }
  }
  .content {
    .field-name-field-image {
      margin: 0 0 15px;
    }
    .field-type-taxonomy-term-reference .field-items .field-item {
      padding-right: 3px;
    }
    .field-name-field-tags {
      border-top: 1px dotted #777777;
      font-size: 11px;
      margin-bottom: 5px;
      padding: 3px;
    }
    .field-name-field-blog-category {
      font-size: 11px;
      padding: 3px;
    }
  }
}

/**************************************************
* --
* 8. Comments
* --
**************************************************/
article.comment {
  padding: 10px 4px 5px 4px;

  header em {
    @include rounded-corners(3px);
    float: right;
    font-size: 12px;
    font-style: normal;
    padding: 2px 4px;
    text-transform: uppercase;
    &.new {
      background-color: #207cca;
      color: #ffffff;
    }
    &.unpublished {
      font-weight: 700;
    }
  }
  footer.comment-submitted {
    border-bottom: 1px dotted #E0E3E6;
    font-size: 12px;
    margin: 5px 0;
    text-transform: uppercase;
  }
  .field-name-comment-body {
    padding: 0px 10px;
  }
  .comment-links {
    font-size: 13px;
    padding: 5px;
    text-transform: uppercase;
  }
}
/* Comment form */
.comment-wrapper {
  padding: 0px 12px;

  .title {
    border-bottom: 1px dotted #656565;
    color: #656565;
    font-weight: 400;
    margin-bottom: 0;
    text-transform: uppercase;
  }
  h2.comment-form {
    border-bottom: 1px solid #E0E3E6;
    margin-top: 20px;
  }
}
.comment-form {
  background-color: #ececec;
  padding: 15px;
  .form-wrapper {
    @include clearfix;
    clear: both;
    float: none;
  }
  .form-item {
    clear: left;
    label {
      float: left;
      padding-right: 8px;
      text-align: right;
      width: 110px;
      &:after {
        clear: both;
        content: ":";
      }
    }
    .form-radios,
    .form-checkboxes {
      float: left;
      label {
        float: inherit;
        text-align: inherit;
        width: auto;
        &:after {
          content: none;
        }
      }
      .form-item {
        white-space: nowrap;
        label {
          float: none;
          text-align: inherit;
          width: auto;
        }
      }
    }
    .description {
      clear: both;
    }
  }
  #edit-author--2 {
    margin: 0;
    label {
      display: inline;
    }
  }
  .form-textarea-wrapper {
    float: left;
    width: 65%;
  }
  .filter-wrapper {
    clear: both;
    .fieldset-wrapper {
      font-size: 11px;
      margin: 0 auto;
      width: 80%;
    }
    .form-item {
      margin-top: 0;
      label {
        float: inherit;
        text-align: inherit;
        width: inherit;
      }
    }
    .form-submit {
      font: normal 16px/21px "Open Sans", Arial, sans-serif;
      line-height: 30px;
      padding: 4px 15px;
    }
    .form-actions {
      clear: both;
    }
  }
}
/* Comment links */
.links.node-links {
  float: right;
  margin-top: 10px;
  margin-right: 15px;
  padding: 5px;
  white-space: nowrap;
}
.node-teaser .links.node-links {
  float: none;
}
.node-links .links {
  background-color: #ececec;
  @include rounded-corners(3px);
  padding: 3px 5px;
}

.node-teaser .links.node-links .links {
  background-color: transparent;

  li {
    margin: 0;
    padding: 0;
  }
  .node-readmore a,
  .comment-comments a,
  .comment-new-comments a {
    border: 1px solid #275a84;
    border-right-width: 0;
    color: #4386be;
    margin: 4px 0;
    padding: 4px 8px;
  }
  .comment-new-comments {
    border-left-width: 0;
    border-right-width: 1px;
    margin-left: -1px;
    &:hover {
      background-color: transparent;
    }
    a {
      color: #ff2424;
    }
  }
  li:hover a {
    background-color: #e7f3fd;
    cursor: pointer;
  }
  .first a {
    -moz-border-radius-topleft: 3px;
    @include rounded(top-left,3px);
    -moz-border-radius-bottomleft: 3px;
    @include rounded(bottom-left,3px);
    padding-right: 8px;
  }
  .last a {
    -moz-border-radius-topright: 3px;
    @include rounded(top-right,3px);
    -moz-border-radius-bottomright: 3px;
    @include rounded(bottom-right,3px);
    border-right-width: 1px;
    padding-right: 8px;
  }
}
/**************************************************
* --
* 9. User account
* --
**************************************************/
.page-user,
.page-checkout {
  #user_register_form,
  #user_login_form,
  .create-account,
  #user_pass_form {
    clear: both;
    float: none;
    width: auto;
  }
  #user-register-form,
  #user-profile-form,
  #user_login_form,
  #user_pass_form {
    .form-submit {
      background: #199107;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #60aa20), color-stop(1, #199107));
      background: -moz-linear-gradient(top center, #60aa20 0%, #199107 100%);
      border: 0;
      @include rounded-corners(4px);
      color: #ffffff;
      padding: 10px 15px;
      &:hover {
        background: #60aa20;
      }
    }
  }
  #user-register-form h1,
  #user_login_form h1,
  .create-account h2,
  #user_pass_form h1 {
    font: normal 300 38px/38px "Open Sans", Arial, sans-serif;
  }
  /* Registration form */
  form#user-register-form,
  form#user-profile-form {
    .form-item-pass {
      position: relative;
      margin-bottom: 80px;

      .password-parent {
        width: inherit;

        .password-strength {
          background-color: #eeeeee;
          @include rounded-corners(5px);
          margin-top: 0;
          padding: 10px;
          position: absolute;
          bottom: -50px;
          width: 90%;
        }
      }
      .confirm-parent {
        width: inherit;

        div.password-confirm {
          background-color: #eeeeee;
          @include rounded-corners(5px);
          margin-top: 0;
          padding: 5px 10px 10px 10px;
          position: absolute;
          bottom: -80px;
          width: 90%;

          .ok {
            color: #60aa20;
            font-weight: bold;
          }
          .error {
            color: #EA2C2C;
            font-weight: bold;
          }
        }
      }
      .password-suggestions {
        width: inherit;

        ul {
          margin-left: 20px;
        }
      }
    }
    .form-actions {
      margin-top: 90px;

      .form-submit {
        float: left;
      }
      .back-to-login {
        float: right;
        margin: 0;
        .login-account {
          display: block;
          float: left;
        }
      }
    }
  }
  /* Login form, create an account block */
  form#user-login {
    /* Login form */
    #user_login_form {
      border: 0;
      border-bottom: 1px solid #444;
      padding-right: 0;
      padding-bottom: 20px;

      .login-password {
        color: $color1;
        &:hover {
          color: $color1;
          text-decoration: underline;
        }
      }
    }
    .create-account {
      margin-top: 20px;
    }
  }
  /* Password form */
  form#user-pass {
    .form-actions {
      float: left;
      margin-right: 20px;
    }
    .back-to-login {
      float: right;
      margin: 1em 0;
      padding-top: 9px;
    }
  }
  /* actions links */
  a.login-register,
  a.login-account {
    background: #207cca;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2698F2), color-stop(1, #207cca));
    background: -moz-linear-gradient(top center, #2698F2 0%, #207cca 100%);
    @include rounded-corners(4px);
    color: $color2;
    font-size: 16px;
    margin-left: 0px;
    padding: 15px 20px;
    &:hover {
      background: $color1;
    }
  }
  a.login-register {
    display: block;
    float: left;
    margin-top: 20px;
  }
  a.login-account {
    display: block;
    font-size: 14px;
    padding: 10px 15px;
  }
}


/* User home */
.page-user {
  .block-system-main {
    margin: 10px;
  }
  .profile {
    h3 {
      border-bottom: 0 transparent;
      background-color: #ECECEC;
      clear: both;
      color: #898A8C;
      font-size: 1.1em;
      margin-top: 20px;
      padding: 5px 10px;
      text-transform: uppercase;
    }
    ul {
      &.user-information {
        width: 100%;
        li {
          border-bottom: 1px solid #444;
          float: left; /* LTR */
          height: 150px;
          list-style: none;
          list-style-image: none;
          min-height: 150px;
          margin-bottom: 20px;
          position: relative;
          padding-bottom: 30px;
          width: 100%;

          h4 {
            font-size: 14px;
            text-transform: uppercase;
          }
          a {
            border: 1px solid #D8D8D8;
            padding: 5px 10px;
            position: absolute;
            bottom: 10px;
            &:hover {
              cursor: pointer;
              text-decoration: underline;
            }
          }
          .view-commerce-backoffice-user-orders td {
            padding: 10px;
          }
        }
      }
      &.user-recent-orders {
        list-style: none;
        list-style-image: none;

        li {
          list-style: none;
          list-style-image: none;
        }
      }
    }
  }
  .tabs ul {
    /* User primary menu/tabs */
    &.primary {
      border-bottom: 1px solid #D8D8D8;
      border-top: 1px solid #D8D8D8;
      margin: 0 0 30px 0;
      li {
        float: left; /* LTR */
        padding: 10px 0;
        a {
          background-color: transparent;
          border: 0 none;
          @include rounded-corners(0px);
          color: #898A8C;

          .active {
            color:#000000;
            font-weight: bold;
          }
        }
      }
    }
    /* User secondary menu/tabs */
    &.secondary {
      border-bottom: 0 transparent;

      li {
        border-right: 0 transparent; /* LTR */
        float: left; /* LTR */
        padding: 0.5em 0;

        a {
          color: #898A8C;
          border: 1px solid #D8D8D8;
          padding: 5px 10px;

          &.active {
            color: #000000;
            font-weight: bold;
            text-decoration: underline;
          }
        }
      }
    }
  }
}

/* Address book */
.page-user-addressbook {
  ul.action-links {
    list-style: none;
    margin: 1.5em 0 2em 0.5em;

    li a {
      background: -moz-linear-gradient(center top , #FFFFFF 0%, #DDDDDD 100%) repeat scroll 0 0 transparent;
      border-color: #DDDDDD #BBBBBB #999999;
      @include rounded-corners(11px);
      border-style: solid;
      border-width: 1px;
      color: #333333;
      font-size: 12px;
      font-weight: bold;
      padding: 3px 10px 4px;
      text-decoration: none;
      text-shadow: 0 1px 1px #FFFFFF;
    }
  }
  .view-commerce-addressbook-defaults .views-field {
    background-color: #F0F0F0;
    border: 1px solid #D8D8D8;
    float: left; /* LTR */
    margin: 0 15px 20px 0; /* LTR */
    padding: 20px;
    min-width: 200px;
  }
  .view-commerce-addressbook td {
    display: block;
    padding: 0;

    .views-field {
      border: 1px solid #D8D8D8;
      margin: 0 15px 15px 0; /* LTR */
      padding: 20px;
      position: relative;

      .field-name-commerce-customer-address {
        color: #5F6061;
        font-size: 13px;
        margin-bottom: 15px;
      }
      .ajax-progress-throbber { /* Positions the throbber */
        position: absolute;
        top: 0;
        right: 0; /* LTR */
      }
    }
  }
  #commerce-addressbook-billing-list,
  #commerce-addressbook-shipping-list {
    clear: both;
  }
}

/* Add comment */
html.js #commerce-backoffice-message-form fieldset .fieldset-legend {
  background-image: url('../images/icon_add.png');
  background-position: 0 50%;
  padding: 0 0 0 30px;
}
#commerce-backoffice-message-form .fieldset-legend a {
  color: #2698F2;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

/* Connector */
.not-logged-in #block-connector-one-click-block {
  margin-left: 10px; /* LTR */
}

.not-logged-in #block-connector-one-click-block .connector-button {
  color: transparent;
  cursor:pointer;
  height: 30px;
  width: 30px;
  margin-right: 10px;
  @include rounded-corners(0px);
}

.not-logged-in #block-connector-one-click-block {
  #edit-oauthconnector-facebook {
    background:url('../images/btn_facebook.png') no-repeat;
  }
  #edit-oauthconnector-twitter {
    background:url('../images/btn_twitter.png') no-repeat;
  }
  #edit-oauthconnector-google {
    background:url('../images/btn_google.png') no-repeat;
  }
}

/* Maintenance Page Styles */
.in-maintenance {
  margin: 0;

  .body-wrapper {
    border-top: 5px solid #8E8E8E;
  }
  #branding,
  #page {
    margin: 0 auto;
    width: 960px;
  }
  #branding {
    padding: 20px 0 10px 0;
  }
  #page .page-wrapper {
    background: #fff;
    padding: 10px 10px 20px 10px;
  }
}
